<template>
 <div class="yxp">
    <top-back :title="title" type="2"></top-back>
    <div class="yxp-word-box" id="wordBox">
      <div class="yxp-wordList-box">
        <div class="yxp-wordList-box-item">
          <div class="yxp-wordList-main">
            <div class="yxp-wordList-item list-item" v-for="(item,i) in wordList" :key="item.id" :class="{active: item.num > 0 && curIndex === i}" @click="handlePlay(item,i)">
              <div class="yxp-wordList-item-l">{{item.word}}</div>
              <div class="yxp-wordList-item-r" v-if="item.num === 2 && curIndex === i">{{item.translate}}</div>
            </div>
            <span
              class="yxp-wordList-page-btn btn-hover"
              id="word-list-more:btn"
              v-show="wordList.length >= 20 && !isFinish"
              @click="handleMoreClick"
              >加载更多</span
            >
          </div>
        </div>
      </div>
      <Empty v-if="isNone" />
    </div>
    <audio ref="audio"></audio>
      <Timetips ref="timetips"></Timetips>
 </div>
</template>
<script>
import TopBack from '@/components/TopBack.vue'
import Empty from '@/components/Empty.vue'
import { squareWord, wordPackage } from '@/services/word.js'
import Timetips from "@/components/Timetips";
export default {
  name: 'wordList',
  components: {
    TopBack,
    Empty,
    Timetips
  },
  data() {
    return {
      title: '',
      curIndex: 0,
      square_type: 0,
      package_id: 0,
      type: '',
      wordList: [],
      pageIndex: 1,
      total: 0,
      isNone: false,
      isFinish: false
    }
  },
  created () {
    if (this.$route.query) {
      const query = this.$route.query
      this.package_id = query.package_id
      if (query.square_type) {
        this.square_type = query.square_type
      }
      if (query.type) {
        this.type = query.type
      }
      switch(this.type) {
        case '':
          this.title = '不会的词'
          break
        case 'today_study':
          this.title = '今日识记'
          break
        case 'today_review':
          this.title = '一眼会'
          break
        case 'all':
          this.title = '累计学习'
          break
        default:
          break
      }
    }
    if (this.type !== '') {
      this.getWordPage()
    } else {
      this.getWordList()
    }
  },
  mounted () {
    // window.addEventListener('scroll', this.handleScroll,true)
  },
  beforeDestroy() {
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
  methods: {
    async getWordList () {
      this.$loading.show()
      let params = {
        square_type: this.square_type,
        package_id: this.package_id,
        page: this.pageIndex
      }
      let data = await squareWord(params)
      if (data.code === 1) {
        this.$loading.hide()
        if (data.data.length === 0) {
          if (this.pageIndex === 1) {
            this.isNone = true
          } else {
            this.isFinish = true
           // window.removeEventListener('scroll', this.handleScroll)
          }
          return
        }
        data.data.map(item => {
          item.num = 0
        })
        this.wordList = [...this.wordList,...data.data]
        this.$nextTick(() => {
          if (this.wordList.length < 7) {
              this.isFinish = true
            } else {
              this.isFinish = false
            }
        })
      } else if (data.code === '10001' || data.code === 10001) {
        this.$loading.hide()
        this.$toast('token过期，请重新登录')
      } else {
        this.$loading.hide()
        this.$toast(data.info)
      }
    },
    async getWordPage () {
      this.$loading.show()
      let params = {
        package_id: this.package_id,
        type: this.type,
        page: this.pageIndex
      }
      let data = await wordPackage(params)
      if (data.code === 1) {
        this.$loading.hide()
        if (data.data.length === 0) {
          if (this.pageIndex === 1) {
            this.isNone = true
          } else {
            this.isFinish = true
           // window.removeEventListener('scroll', this.handleScroll)
          }
          return
        }
        data.data.map(item => {
          item.num = 0
        })
        this.wordList = [...this.wordList,...data.data]
        this.$nextTick(() => {
          this.isFinish = false
        })
      } else if (data.code === '10001' || data.code === 10001) {
        this.$loading.hide()
        this.$toast('token过期，请重新登录')
      } else {
        this.$loading.hide()
        this.$toast(data.info)
      }
    },
    handleScroll() {
      console.log(this.isFinish + '滚动')
      let scrollDom = document.getElementById('wordBox')
      if (scrollDom.scrollTop > 0) {
        if (scrollDom.clientHeight + parseInt(scrollDom.scrollTop) >  scrollDom.scrollHeight - 10) {
          if (!this.isFinish) {
            this.pageIndex++
            this.isFinish = true
            console.log(this.isFinish + '分页')
            if (this.type !== '') {
              this.getWordPage()
            } else {
              this.getWordList()
            }
          }
        }
      }
    },
    handleMoreClick() {
      if (!this.isFinish) {
        this.pageIndex++
        this.isFinish = true
        console.log(this.isFinish + '分页')
        if (this.type !== '') {
          this.getWordPage()
        } else {
          this.getWordList()
        }
      }
    },

    // 播放语音
    handlePlay (item, i) {
      this.curIndex = i
      let num = item.num
      num++
      if (num > 2) num = 1
      this.$set(item, 'num', num)
      let audio = this.$refs.audio
      audio.src = item.project_voice
      audio.play()
      this.wordList.map((elem,index) => {
        if (index !== i) {
          this.$set(elem, 'num', 0)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
